import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { App } from './App';
import { Skincare } from './pages/Skincare';
import { Makeup } from './pages/Makeup';
import { Wellness } from './pages/Wellness';
import { TheRitual } from './pages/TheRitual';
import { OurStory } from './pages/About/OurStory';
import { OurValues } from './pages/About/OurValues';
import { PrivacyPolicy } from './pages/About/PrivacyPolicy';
import { Contact } from './pages/About/Contact';
import { SkincareDetail } from './pages/ProductDetail/SkincareDetail';
import { MakeupDetail } from './pages/ProductDetail/MakeupDetail';
import { WellnessDetail } from './pages/ProductDetail/WellnessDetail';
import { WellnessGuideDetail } from './pages/WellnessGuideDetail';
import { Articles } from './pages/Articles';
import { ArticleDetail } from './pages/ArticleDetail';
export function AppRouter() {
  return <BrowserRouter
      future={{
        v7_startTransition: true,
        v7_relativeSplatPath: true
      }}
    >
      <Routes>
        <Route path="/" element={<App />}>
          <Route path="skincare" element={<Skincare />} />
          <Route path="skincare/:productId" element={<SkincareDetail />} />
          <Route path="makeup" element={<Makeup />} />
          <Route path="makeup/:productId" element={<MakeupDetail />} />
          <Route path="wellness" element={<Wellness />} />
          <Route path="wellness/:productId" element={<WellnessDetail />} />
          <Route path="wellness-guide/:guideId" element={<WellnessGuideDetail />} />
          <Route path="the-ritual" element={<TheRitual />} />
          <Route path="articles" element={<Articles />} />
          <Route path="article/:articleId" element={<ArticleDetail />} />
          <Route path="about">
            <Route path="our-story" element={<OurStory />} />
            <Route path="our-values" element={<OurValues />} />
            <Route path="privacy-policy" element={<PrivacyPolicy />} />
            <Route path="contact" element={<Contact />} />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>;
}